<template>
  <card class="insure-card" title="操作记录" :showDivider="false">
    <table-index class="insure-card-table" :table="table" @loadData="loadData">
      <template #operateLog="{ record }">
        <p class="log-info">{{ record.operateLog }}</p>
      </template>
    </table-index>
  </card>
</template>
<script setup lang="ts">
  import { reactive, onMounted, ref } from 'vue'
  import { useTable } from '@/hooks/table'
  import { operateLogList } from '@/api/order/sOrder'

  const props = defineProps({
    orderId: Number,
  })
  const queryParam = reactive({
    id: props.orderId,
  })

  const operateList = ref([])
  const table = useTable({
    dataList: operateList,
    columns: [
      {
        title: '操作时间',
        dataIndex: 'createTime',
        width: 200,
      },
      { title: '操作类型', dataIndex: 'operateTypeName', width: 200 },
      { title: '操作人', dataIndex: 'createUserName', width: 200 },
      { title: '订单状态', dataIndex: 'orderStatus', width: 200 },
      { title: '描述', slotName: 'operateLog' },
    ],
    tableLoading: false,
    pagination: false,
  })

  onMounted(() => {
    operateLogList({ ...queryParam }).then((res: any) => {
      operateList.value = res.result
    })
  })
</script>
<style scoped lang="less">
  .log-info {
    white-space: pre-wrap;
  }
</style>
